<template>
  <div>
    <div class="recommend-title">热销推荐</div>
    <ul>
      <li class="item border-bottom" v-for="item of recommendList" :key="item.id">
        <img
          class="item-img"
          :src="item.imgUrl"
        >
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">查看详情</button>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props:{
   recommendList:{
     type:Array
   }
  },
    data(){
        return{
            // recommendList: [{
            //     id: '0001',
            //     imgUrl: 'https://imgs.qunarzz.com/sight/p0/1709/41/411f234d79457081a3.img.jpg_200x200_ea02ef99.jpg',
            //     title:'长隆野生动物世界长隆野生动物世界长隆野生动物世界长隆野生动物世界长隆野生动物世界长隆野生动物世界',
            //     desc:'熊猫三胞胎与您共享欢乐时光'
            // },
            // {
            //     id: '0002',
            //     imgUrl: 'https://imgs.qunarzz.com/sight/p0/1707/88/889ae02b07140066a3.img.jpg_200x200_d3b1427c.jpg',
            //     title:'长隆欢乐世界',
            //     desc:'爱挑战的你怎能错过垂直过山车'
            // },
            // {
            //     id: '0003',
            //     imgUrl: 'https://imgs.qunarzz.com/sight/p0/1603/3c/3c514c20a740128b90.water.jpg_200x200_c7102a23.jpg',
            //     title:'南沙百万葵园',
            //     desc:'记录唯美爱情，拍摄婚纱的好去处'
            // }
            // ]
        }
    }
};
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.recommend-title {
  line-height: 0.8rem;
  background: #eee;
  margin-top: 0.2rem;
  text-indent: 0.2rem;
}

.item {
  display: flex;
  height: 1.9rem;

  .item-img {
    height: 1.7rem;
    width: 1.7rem;
    padding: 0.1rem;
  }

  .item-info {
    flex: 1;
    padding: 0.1rem;
    min-width:0 ;
    .item-title {
      line-height: 0.54rem;
      font-size: 0.32rem;
      ellipsis();
    }

    .item-desc {
      line-height: 0.4rem;
      color: #ccc;
    }

    .item-button {
     line-height: .44rem;
      margin-top: 0.16rem;
      background: #ff9300;
      padding: 0 0.2rem;
      border-radius:.06rem;
      color: #fff;
    }
  }
}
</style>
